<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!--
  插值表达式：Vue 的一种模板语法
  作用: 利用表达式 进行插值渲染
  语法：{{ 表达式}}

  注意点：
    1.使用的数据要存在
    2.支持的表达式 不是语句 if for
    3.不能在标签属性中使用{{ }}
-->
<div id="app">
    <!--这里将来会编写一些用于渲染的代码逻辑  -->
    <p>{{nackName}}</p>
    <p> {{nackName.toUpperCase()}}</p>
    <p>{{nackName + '你好'}}</p>
    <p>{{age >= 18 ? '成年':'未成年'}}</p>
    <p>{{friend.name}}</p>
    <p>{{friend.age}}</p>

    <!--    ----------------------------->
    <!--  数据不存在  -->
    <p>{{hobby}}</p>
    <!-- 不支持js中的关键字 -->
    <!--<p>{{if}}</p>-->
    <!--  标签属性中使用  -->
    <!--    <p title="{{nackName}}">我是p标签</p>-->
    <!--    -------------------------------->
</div>
<!--引入是开发版本的包，包含完整的注释和警告-->
<script src="./vue.js"></script>

<script>
    //一旦引入VueJS核心包，在全局环境，就有了Vue的构造函数
    const app = new Vue({
        //通过el配置选择器，制定Vue管理的是那个盒子
        el: '#app',
        data: {
            nackName: 'tony',
            age: 18,
            friend: {
                name: 'snow',
                desc: '热爱学习Vue'
            }
        }
    })


</script>

</body>
</html>
